scripty2

namespace S2.CSS

Description

Utility functions for CSS parsing, color normalization and tweening.

Methods

Class methods

  • colorFromString #

    S2.CSS.colorFromString(color) -> String
    • color (String) – Color in #abc, #aabbcc or rgba(1,2,3) format

    Returns a normalized color in the #aabbcc format.

    • #abc -> Expanded to #aabbcc
    • #aabbcc -> not changed
    • rgb(1,2,3) -> Expanded to #010203
    • other input -> not changed

    This method does not support HTML color constants.

  • interpolate #

    S2.CSS.interpolate(property, from, to, position) -> Number | String
    • property (String) – CSS property name to interpolate (e.g. 'font-size')
    • from (String | Number) – Original value
    • to (String | Number) – Target value
    • position (Number) – interpolation position between 0 (original) and 1 (destination)

    Returns the value for an arbitrary position between two CSS property values. The type of interpolation will be automatically choosen based on the the CSS property. Positions less then 0 and greater than 1 are possible.

    S2.CSS.interpolate('font-size', '14px', '18px', 0.5) -> '16px'
S2.CSS.interpolate('background-color', '#abc', '#def', 0.5) -> '#c4d5e6'
S2.CSS.interpolate('opacity', 1, 0, 0.75) -> 0.25
S2.CSS.interpolate('zIndex', 1, 10, 0.75) -> 8
    To generate a list of supported CSS properties and types, use:
    $H(S2.CSS.PROPERTY_MAP).map(function(v){
  return v[0].underscore().dasherize(r)+' ('+v[1]+')';
}).join(', ');

  • interpolateColor #

    S2.CSS.interpolateColor(from, to, position) -> String
    • from (String) – Original color in #abc, #aabbcc or rgba(1,2,3) format
    • to (String) – Target color in #abc, #aabbcc or rgba(1,2,3) format
    • position (Number) – interpolation position between 0 (original) and 1 (target)

    Returns a color in #aabbcc format for an arbitrary position between two colors. Positions less then 0 and greater than 1 are possible.

    S2.CSS.interpolateColor('#ffffff', '#000000', 0.5) -> '#808080'
    This method does not support HTML color constants as input values.

  • interpolateInteger #

    S2.CSS.interpolateInteger(from, to, position) -> Number
    • from (Number) – Original number
    • to (Number) – Target number
    • position (Number) – interpolation position between 0 (original) and 1 (destination)

    Returns a number rounded to the next integer for an arbitrary position between two numbers. Positions less then 0 and greater than 1 are possible.

    S2.CSS.interpolateInteger(1, 5, 0.5);  -> 3
S2.CSS.interpolateInteger(2, 4, 0.1);  -> 2
S2.CSS.interpolateInteger(1, 10, 2);   -> 19
S2.CSS.interpolateInteger(1, 2, -0.5); -> 1

  • interpolateLength #

    S2.CSS.interpolateLength(from, to, position) -> String
    • from (Number) – Original CSS length
    • to (Number) – Target CSS length (unit must be the same as in the from argument)
    • position (Number) – interpolation position between 0 (original) and 1 (destination)

    Returns a CSS length for an arbitrary position between two CSS lengths. Positions less then 0 and greater than 1 are possible.

    S2.CSS.interpolateLength('12px','18px',0.5)-> '15px'
S2.CSS.interpolateLength('10%','30%',0.7) -> '24%'

  • interpolateNumber #

    S2.CSS.interpolateNumber(from, to, position) -> Number
    • from (Number) – Original number
    • to (Number) – Target number
    • position (Number) – interpolation position between 0 (original) and 1 (destination)

    Returns a number for an arbitrary position between two numbers. Positions less then 0 and greater than 1 are possible.

    S2.CSS.interpolateNumber(1, 2, 0.5)  -> 1.5
S2.CSS.interpolateNumber(1.5, 4.5, 0.1) -> 1.8
S2.CSS.interpolateNumber(1, 10, 2)   -> 3
S2.CSS.interpolateNumber(1, 2, -0.5) -> 0.5

  • normalizeColor #

    S2.CSS.normalizeColor(color) -> Array
    • color (String) – Color in #abc, #aabbcc or rgba(1,2,3) format

    Returns the value of a CSS color as a RGB triplet:

    • #abc -> [170, 187, 204]
    • #aabbcc -> not changed
    • rgb(1,2,3) -> [1, 2, 3]
    • #xyz -> [NaN, NaN, NaN]

    This method does not support HTML color constants.

  • parseStyle #

    S2.CSS.parseStyle(string) -> Object

    Takes a string of CSS rules and parses them into key/value pairs. Shortcut properties, colors and opacity settings on IE are normalized.

    Example:

    S2.CSS.parseStyle('font-size:11px; border:12px solid #abc; border-left-width: 5px') ->
    


    {
  borderBottomColor: '#aabbcc',
  borderBottomWidth: '12px',
  borderLeftColor:   '#aabbcc',
  borderLeftWidth:   '#5px',
  borderRightColor:  '#aabbcc',
  borderRightWidth:  '12px',
  borderTopColor:    '#aabbcc',
  borderTopWidth:    '12px',
  fontSize:          '11px'
}

Constants

  • LENGTH #

    Regular expression for a CSS length, for example 12px, 8.4in, 13% or 0.

  • NUMBER #

    Regular expression for a CSS numeric value, for example '+12.90', '-2' or '21.5'.